<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搅拌工序</title>
</head>

<body>
    <div class="modal" tabindex="-1" id="partTableModal">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-body">
                    <table class="table table-bordered border-primary" id="partTable"></table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" id="selectInputModal" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content input-modal-content">
                <div class="modal-header modal-header-content">
                    <h5 class="modal-title">请选择设备</h5>
                    <a class="modal-title" href="/mixing-process/home/index.html">返回主页</a>
                </div>
                <div class="modal-body modal-body-content" id="input-modal-body">
                </div>
                <div class="modal-footer modal-footer-content">
                    <button disabled id="selectDeviceHostButton" type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <div id="app">
        <div id="main">
            <div class="t_container">
                <header class="t_header">
                    <span id="process-title">搅拌工序-XXX</span>
                </header>
                <main class="t_main">
                    <div class="t_left_box">
                        <img class="t_l_line" src="img/left_line.png">
                        <div class="t_mbox t_rbox">
                            <i></i>
                            <span>本月设备异常</span>
                            <h2 id="exception-count-text">--</h2>
                        </div>
                        <div class="t_mbox t_gbox">
                            <i></i>
                            <span>本月设备通知</span>
                            <h2 id="notification-count-text">--</h2>
                        </div>
                        <div class="t_mbox t_ybox">
                            <i></i>
                            <span>本月设备报警</span>
                            <h2 id="warning-count-text">--</h2>
                        </div>
                        <img class="t_r_line" src="img/right_line.png">
                    </div>
                    <div class="t_center_box">
                        <div class="t_top_box">
                            <img class="t_l_line" src="img/left_line.png">
                            <ul class="t_nav">
                                <li>
                                    <span>设备主机</span>
                                    <span id="device-host-id-text"
                                        style="margin-top: 40px; color: white; font-size: 0.99rem;;">--</span>
                                    <i></i>
                                </li>
                                <li>
                                    <span>设备个数</span>
                                    <h1 id="device-maintenance-count-text">--</h1>
                                    <i></i>
                                </li>
                                <li>
                                    <span>易损件个数</span>
                                    <h1 id="device-part-count-text">--</h1>
                                </li>
                            </ul>
                            <img class="t_r_line" src="img/right_line.png">
                        </div>
                        <div class="t_bottom_box">
                            <img class="t_l_line" src="img/left_line.png">
                            <div id="chart_3" class="echart"
                                style="width: 100%; height: 22.30rem; background: url(./img/pulping-machine.png) no-repeat; background-size: auto 90%; background-position: center top; ">
                            </div>
                            <img class="t_r_line" src="img/right_line.png">
                        </div>
                    </div>
                    <div class="t_right_box">
                        <img class="t_l_line" src="img/left_line.png">
                        <div id="chart_4" class="echart" style="width: 50%; height: 28.50rem; position: absolute;">
                        </div>
                        <header class="t_b_h">
                            <div class="img-container">
                                <div>
                                    <img src="img/list.png">
                                    <div id="openTableButton" class="tool-tip" data-bs-custom-class="custom-tooltip"
                                        data-bs-toggle="tooltip" data-bs-title="打开部件列表"></div>
                                </div>
                                <img src="img/sper.png">
                                <div>
                                    <img src="img/maintenance.png">
                                    <div id="goToMaintenanceButton" class="tool-tip"
                                        data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip"
                                        data-bs-title="转到设备维护"></div>
                                </div>
                            </div>
                            <div class="img-container">
                                <div>
                                    <img src="img/home.png">
                                    <div id="goToHomeButton" class="tool-tip" data-bs-custom-class="custom-tooltip"
                                        data-bs-toggle="tooltip" data-bs-title="返回主页"></div>
                                </div>
                            </div>
                        </header>
                        <main class="t_b_m">
                            <img src="img/map.png">
                            <div class="t_b_box">
                                <span>溫度</span>
                                <i></i>
                                <h2>--℃</h2>
                            </div>
                            <div class="t_b_box1">
                                <span>湿度</span>
                                <i></i>
                                <h2>--RH</h2>
                            </div>
                            <div class="t_b_box2">
                                <span>信号</span>
                                <i></i>
                                <h2>--dBm</h2>
                            </div>
                            <div class="t_b_box3">
                                <span>光线</span>
                                <i></i>
                                <h2>--LX</h2>
                            </div>
                        </main>
                        <img class="t_r_line" src="img/right_line.png">
                    </div>
                    <div class="b_left_box">
                        <img class="t_l_line" src="img/left_line.png">
                        <div id="chart_2" class="echart" style="width: 100%; height: 22.30rem;"></div>
                        <img class="t_r_line" src="img/right_line.png">
                    </div>
                    <div class="b_center_box">
                        <img class="t_l_line" src="img/left_line.png">
                        <div id="chart_1" class="echart" style="width: 100%; height: 22.30rem;"></div>
                        <img class="t_r_line" src="img/right_line.png">
                    </div>
                    <div class="b_right_box">
                        <img class="t_l_line" src="img/left_line.png">
                        <h1 class="t_title">设备维保人员</h1>
                        <table id="maintenance-table" class="t_table">
                        </table>
                        <img class="t_r_line" src="img/right_line.png">
                    </div>
                </main>
            </div>
        </div>
    </div>
</body>

</html>